<!DOCTYPE html>
<html>
<head>
	<title>彩虹钟</title>
	<meta charset="utf-8">
<script type="text/javascript" nonce="13fd8364fc154d2ba3d3db663ee" src="//local.adguard.org?ts=1632824963175&amp;type=content-script&amp;dmn=sys-stu-works.qiniu.mfcode.net&amp;app=QQBrowser.exe&amp;css=1&amp;js=1&amp;gcss=1&amp;rel=1&amp;rji=1&amp;sbe=0"></script>
<script type="text/javascript" nonce="13fd8364fc154d2ba3d3db663ee" src="//local.adguard.org?ts=1632824963175&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"></script></head>
<body style="background-color: #fbeee5;">

	<center>
		<h1 style="
		color:#90d0d9;
		font-weight: bolder;
		font-size: 55px;
		font-family: 'Sedgwick Ave Display', cursive;
		">独角兽小闹钟</h1>
	</center>
	<div style="border-bottom: 2px solid #f3adcb;">
		<img id="animal" style="
		width: 150px;
		height: 150px;
		clip-path: inset(15px 15px 15px 15px);
		transform: scaleX(-1);
		" src="https://pic.ntimg.cn/file/20181123/27913426_113526674036_2.jpg">
	</div>
	<button id="pfather" style="width: 60px;height: 30px;
				border-radius: 15px;
				border: 2px solid #f3adcb;
				font-size: 22px;
				color: white;
				margin-top: 12px;
				margin-left: 35px;
				background-color: #90d0d9;"><span id="percent">1</span>%</button>
	<center>
		<p>
			<button
				style="
					color:#90d0d9;
					font-weight: bolder;
					font-size: 55px;
					font-family: 'Bitter', serif;
					border:2px solid #90d0d9;
					width: 65px;
					background-color:#efefef; 
				"
				id = "btnSub"
			> - </button>
			<span
				style="
				margin-left:35px;
				margin-right:35px;
				color:#90d0d9;
				font-weight: bolder;
				font-size: 55px;
				font-family: 'Bitter', serif;
				"
			> 
				<span id="minute">25</span>:<span id="second">00</span> 
			</span>
			<button
				style="
					color:#90d0d9;
					font-weight: bolder;
					font-size: 55px;
					font-family: 'Bitter', serif;
					border:2px solid #90d0d9;
					width: 65px;
					background-color:#efefef; 
				"
				id = "btnAdd"
			> + </button>
		</p>

		<button
			style="
				width: 225px;height: 120px;
				border-radius: 60px;
				border: 2px solid #f3adcb;
				font-size: 33px;
				color: #f3adcb;
				background-color: #fbeee5;
			"
			id="start"
		>开始/暂停</button>
	</center>
	
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

	<script type="text/javascript">
		var defaultMinute = 15;
		var defaultSecond = 0;

		var flag = 1;
		var session = defaultMinute;
		var breaklength = 5;
		var sec = defaultSecond;

		var percent = 88;

		// 初始化
		$("#minute").html(session);
		$("#second").html(sec>=10?""+sec:"0"+sec);

		var run = function(){
			if(flag == 2){// 2是开始
				sec = sec - 1;
				if(sec<0){
					sec = 59;
					session = session - 1;
				}
				if(session<0){
					alert("时间到")
					flag = 1;// 1是暂停
					session = defaultMinute;
					sec = defaultSecond;
				}
				// 每次修改
				$("#minute").html(session);
				$("#second").html(sec>=10?""+sec:"0"+sec);

				// 百分比 = 1 - 已经过了多少秒 / 总的秒数
				percent = 1 - (session*60+sec)/(defaultMinute*60+defaultSecond);
				percent = parseInt(percent*100);
				$("#percent").html(percent);
				$("#animal").css({"margin-left":percent+"%"});
				$("#pfather").css({"margin-left":2.2+percent+"%"});
			}
		}

		setInterval(run,1000) 
		$("#start").click(function(){ 
			if (flag == 1) {flag = 2;} // 1是暂停
			else if (flag == 2) {flag = 1;} // 2是开始
		});

		$("#btnAdd").click(function(){ 
			defaultMinute = defaultMinute + 1;
			defaultSecond = 0;
			flag = 1;// 1是暂停
			session = defaultMinute;
			sec = defaultSecond;
			// 每次修改
			$("#minute").html(session);
			$("#second").html(sec>=10?""+sec:"0"+sec);
		});

		$("#btnSub").click(function(){ 
			defaultMinute = defaultMinute - 1;
			defaultSecond = 0;
			flag = 1;// 1是暂停
			session = defaultMinute;
			sec = defaultSecond;
			// 每次修改
			$("#minute").html(session);
			$("#second").html(sec>=10?""+sec:"0"+sec);
		});

	</script>

</body>
</html>